<template>
  <div>
    <p>同时按下 ctrl + alert + p键 查看组合键是否生效</p>
  </div>
</template>

<script setup lang="ts">
// https://vueuse.org/core/onKeyStroke/
import { onKeyStroke } from '@vueuse/core';

// 基于onKeyStroke 封装组合按钮功能
function useCombinationKeyDown(
  keys: string[],
  handle: (eventObj: { [key: string]: KeyboardEvent }) => void,
) {
  let obj: {
    [key: string]: KeyboardEvent;
  } = {};

  onKeyStroke(
    keys,
    e => {
      e.preventDefault();
      obj[e.key] = e;
      const len = Object.keys(obj);
      if (len.length === keys.length) {
        handle({ ...obj });
        obj = {};
      }
    },
    {
      eventName: 'keydown',
    },
  );

  onKeyStroke(
    keys,
    e => {
      e.preventDefault();
      if (obj[e.key]) {
        delete obj[e.key];
      }
    },
    {
      eventName: 'keyup',
    },
  );
}

useCombinationKeyDown(['Control', 'Alt', 'p'], e => {
  alert("同时按下 ['Control', 'Alt', 'p']");
  console.log(e);
});

// 讲过查看后续api 发现已经有现有的函数实现了组合键功能 useMagicKeys https://vueuse.org/core/useMagicKeys/

// let obj: {
//   [key: string]: string;
// } = {};
//
// onKeyStroke(
//   ['Control', 'Alt', 'p'],
//   e => {
//     e.preventDefault();
//     obj[e.key] = e.key;
//     const len = Object.keys(obj);
//     if (len.length === 3) {
//       alert('快捷操作：ctrl + alt + p');
//       obj = {};
//     }
//   },
//   {
//     eventName: 'keydown',
//   },
// );
//
// onKeyStroke(
//   ['Control', 'Alt', 'p'],
//   e => {
//     e.preventDefault();
//     if (obj[e.key]) {
//       delete obj[e.key];
//     }
//   },
//   {
//     eventName: 'keyup',
//   },
// );
</script>

<style></style>
